<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="auto">
    <!-- <el-form-item label="id">
      <el-input v-model="form.id" />
    </el-form-item> -->
    <el-form-item label="客户姓名">
      <el-input readonly v-model="form.customerName" />
    </el-form-item>
    <el-form-item label="护理项目编号">
      <el-input readonly v-model="form.serialNumber" />
    </el-form-item>
    <el-form-item label="护理项目名称">
      <el-input readonly v-model="form.nursingName" />
    </el-form-item>
    <el-form-item label="价格">
      <el-input readonly v-model="form.servicePrice" />
    </el-form-item>
    <el-form-item label="数量">
      <el-input v-model="form.nurseNumber" />
    </el-form-item>
    <!-- <el-form-item label="新增数量">
      <el-input />
    </el-form-item>
    <el-form-item label="总数量">
      <el-input />
    </el-form-item> -->
    <el-form-item label="服务到期时间" type="datetime">
      <el-date-picker
        type="datetime"
        placeholder="请选择时间"
        v-model="form.maturityTime"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="onSubmit">保存</el-button>
      <el-button @click="cancleEdit">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="edit">
import { ref, reactive } from "vue";
import { saveOrUpdate, getById, update } from "@/api/CareManagement/careSetup/index.js";
import { ElMessageBox, ElNotification } from "element-plus";
import { onMounted } from "vue";

// 表单信息
const form = ref({
  customerName: "",
  serialNumber: "",
  nursingName: "",
});
// 代表父组件传过来的closeEdit函数
const { closeEdit, editId } = defineProps(["closeEdit", "editId"]);

// 保存按钮点击事件
const onSubmit = () => {
  // console.log('submit!')
  update(form.value).then((success) => {
    ElNotification({
      title: "消息",
      type: "success",
      message: "保存成功",
    });
    closeEdit(true);
  });
};

// 点击取消按钮
const cancleEdit = () => {
  closeEdit(false);
};

// 当修改操作的到时候 根据主键查询 通过调用getById函数来获取指定editId的用户数据 并将相关数据填充到表单中
const pageGetById = async () => {
  try {
    // 异步调用getById函数获取用户数据
    const data = await getById(editId);
    if (data && data.customer) {
      // 假设form.value需要包含customer、nursecontent和customernurseitem的数据
      form.value = {
        ...data.customer,
        ...data.nursecontent,
        ...data.customernurseitem,
      };
    } else {
      console.warn("未找到id");
    }
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};
//  function pageGetById() {
//     getById(editId).then(user => {
//         form.value = user
//     })
// }

onMounted(() => {
  // 如果获取到editId，则代表修改用户信息
  // alert("editId:" + editId);
  if (editId) {
    pageGetById();
  } else {
    // alert("create ")
    form.value.isDeleted = 0;
  }
});
</script>

<style scoped>
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 15px 5px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

/* .demo-form-inline .el-date-picker {
    --width: 10px;
  } */

/* .demo-form-inline .el-select {
    --el-select-width: 100px;
  } */
</style>
